@header = {
}

@footer = {
}

@main(header, footer, "/timeline") {
    <h2 style="text-align: center">@Messages("timeline.title")</h2>
    <div>
        <br>
        <div class="row">
            <div class="text-center col-sm-4 col-md-4 col-lg-4">
                <img src="@routes.Assets.at("images/logoSmall.png")">
            </div>
            <div class="col-sm-8 col-md-8 col-lg-8">
                @Messages("timeline.noTimeline")
                <br><br>
                <div class="text-center">
                    <div class="btn-group btn-group-lg" role="group">
                        <a  type="button" class="btn btn-default btn-success"
                            href="https://addons.mozilla.org/firefox/addon/amiunique/"
                            role="button" target="_blank"><i class="fa fa-fw fa-firefox"></i> Firefox</a>
                        <a  type="button" class="btn btn-default btn-success"
                            href="https://chrome.google.com/webstore/detail/amiunique/pigjfndpomdldkmoaiiigpbncemhjeca"
                            role="button" target="_blank"><i class="fa fa-fw fa-chrome"></i> Chrome</a>
                    </div>
                </div>
            </div>
        </div>
        <br><br><br>

        <div id="carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0" class="active"></li>
                <li data-target="#carousel" data-slide-to="1"></li>
                <li data-target="#carousel" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="@routes.Assets.at("images/extension/ami-3.png")">
                    <div class="carousel-caption">
                        @Messages("timeline.img1")
                    </div>
                </div>
                <div class="item">
                    <img src="@routes.Assets.at("images/extension/ami-1.png")">
                    <div class="carousel-caption">
                        @Messages("timeline.img2")
                    </div>
                </div>
                <div class="item">
                    <img src="@routes.Assets.at("images/extension/ami-2.png")">
                    <div class="carousel-caption">
                        @Messages("timeline.img3")
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <style type="text/css">
        .carousel-caption{
            background-color: dimgray;
            border: black;
            bottom: 25px;
        }
        .carousel-control.left,.carousel-control.right{
            color: black;
            background-image: none;
        }
        .carousel-inner > .item > img {
             margin: 0 auto;
        }
    </style>

}